<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>井字棋</title>
</head>
<body>
  <div id="tic-tac-toe">
    <div class="table-row">
      <div class="cell" id="0-0">
        <div class="circle"></div>
        <div class="X">×</div>
      </div>
      <div class="cell" id="0-1">
        <div class="circle"></div>
        <div class="X">×</div>
      </div>
      <div class="cell" id="0-2">
        <div class="circle"></div>
        <div class="X">×</div>
      </div>
    </div>
    <div class="table-row">
      <div class="cell" id="1-0">
        <div class="circle"></div>
        <div class="X">×</div>
      </div>
      <div class="cell" id="1-1">
        <div class="circle"></div>
        <div class="X">×</div>
      </div>
      <div class="cell" id="1-2">
        <div class="circle"></div>
        <div class="X">×</div>
      </div>
    </div>
    <div class="table-row">
      <div class="cell" id="2-0">
        <div class="circle"></div>
        <div class="X">×</div>
      </div>
      <div class="cell" id="2-1">
        <div class="circle"></div>
        <div class="X">×</div>
      </div>
      <div class="cell" id="2-2">
        <div class="circle"></div>
        <div class="X">×</div>
      </div>
    </div>
  </div>
</body>

<style>
  #tic-tac-toe {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 300px;
    height: 300px;
    flex-direction: row;
  }
  
  .circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid black;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
  }

  .X {
    font-size: 80px;
    line-height: 90px;
    text-align: center;
    display: none;
  }

  .table-row {
    display: flex;
    flex-direction: row;
  }
  
  .cell {
    border: 1px solid black;
    width: 98px;
    height: 98px;
  }
</style>

<script>
  const array =  [[0, 0, 0],[0, 0, 0],[0, 0, 0]];
  let steps = 0;
  const cells = document.querySelectorAll('.cell');
  // 初始化棋盘
  function initTable() {
    for(let i = 0;i < array.length; i++) {
      for(let j = 0;j < array[i].length; j++) {
        array[i][j] = 0;
      }
    }
    for(cell of cells) {
      for(mark of cell.children) {
        mark.style.display = "none";
      }
    }
  }

  // 判断是否赢的函数
  function isWin() {
    // 判断和棋的标志，每一行还有没有0
    let zero_num = 0;
    for(let i = 0;i < array.length; i++) {
      if(array[i].indexOf(0) == -1) {
        zero_num++;
      }
      // 判断一行全是一样的赢
      if(array[i][0] === array[i][1] && array[i][0] === array[i][2] && array[i][0] != 0) {
          if(array[i][0] === 1) {
            alert("圈圈赢了！");
          } else {
            alert("叉叉赢了！");
          }
          initTable();
        } 
      // 判断一列都是一样的赢
      else if(array[0][i] === array[1][i] && array[0][i] === array[2][i] && array[0][i] != 0) {
          if(array[i][0] === 1) {
            alert("圈圈赢了！");
          } else {
            alert("叉叉赢了！");
          }
          initTable();
        }
      // 判断两行对角线是否一样的赢
      else if(array[0][0] === array[1][1] && array[1][1] === array[2][2] && array[1][1] != 0) {
        if(array[1][1] === 1) {
            alert("圈圈赢了！");
          } else {
            alert("叉叉赢了！");
          }
          initTable();
      } 
      else if(array[2][0] === array[1][1] && array[1][1] === array[0][2] && array[1][1] != 0) {
        if(array[1][1] === 1) {
            alert("圈圈赢了！");
          } else {
            alert("叉叉赢了！");
          }
          initTable();
      }
    }
    // 判断是否和棋
    if(zero_num === array.length) {
      alert("和棋！");
      initTable();
    }
  }

  for(cell of cells) {
    cell.addEventListener('click', function() {
      if(array[this.id[0]][this.id[this.id.length-1]] === 0) {
        steps++;
        if(steps % 2 === 1) {
          this.children[0].style.display = 'block';
          array[this.id[0]][this.id[this.id.length-1]] = 1;
        } else  {
          this.children[1].style.display = 'block';
          array[this.id[0]][this.id[this.id.length-1]] = 2;
        }
        setTimeout(isWin, 100);
      }
    })
  }
</script>

</html>